/* 2D Transitions */
/* box-shadow 的作用,是防止一些黑边 */
.ani-2d{
	display: inline-block;
	vertical-align: middle;
	margin: 0 6px;
	padding: 12px;
    cursor: pointer;
    background: #e1e1e1;
    text-decoration: none;
    color: #666;
    box-shadow: 0 0 1px rgb(0 0 0 / 0%);
}
/* Grow */
.ani-2d-grow{
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}
.ani-2d-grow:hover, .ani-2d-grow:focus, .ani-2d-grow:active {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
/* shrink */
.ani-2d-shrink{
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}
.ani-2d-shrink:hover, .ani-2d-shrink:focus, .ani-2d-shrink:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

/* pulse */
.ani-2d-pulse{
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}
.ani-2d-pulse:hover, .ani-2d-pulse:focus, .ani-2d-pulse:active {
    -webkit-animation-name: ani-2d-pulse;
    animation-name: ani-2d-pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
@keyframes ani-2d-pulse {
    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    75% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

/* push */
.ani-2d-push{
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}
.ani-2d-push:hover, .ani-2d-push:focus, .ani-2d-push:active {
    -webkit-animation-name: ani-2d-push;
    animation-name: ani-2d-push;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}
@keyframes ani-2d-push {
    25% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    75% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/* bounce-in */
.ani-2d-bounce-in{
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.ani-2d-bounce-in:hover, .ani-2d-bounce-in:focus, .ani-2d-bounce-in:active {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

/* bounce-out */
.ani-2d-bounce-out{
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.ani-2d-bounce-out:hover, .ani-2d-bounce-out:focus, .ani-2d-bounce-out:active {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

/* skew-forward */
.ani-2d-skew-forward {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.ani-2d-skew-forward:hover, .ani-2d-skew-forward:focus, .ani-2d-skew-forward:active {
    -webkit-transform: skew(-10deg);
    transform: skew(-10deg);
}

/* skew-backward */
.ani-2d-skew-backward {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.ani-2d-skew-backward:hover, .ani-2d-skew-backward:focus, .ani-2d-skew-backward:active {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
}


.ani-2d-wobble-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
}
.ani-2d-wobble-horizontal:hover, .ani-2d-wobble-horizontal:focus, .ani-2d-wobble-horizontal:active {
    -webkit-animation-name: ani-2d-wobble-horizontal;
    animation-name: ani-2d-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}
@keyframes ani-2d-wobble-horizontal {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}